<template>
  <div>
    <el-card class="search-card">
      <BasicTableForm
        ref="formData"
        formItemWidth="130px"
        :formColumns="formItems"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <BasicTable
        showActionCol
        :showSelectCol="false"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :tableHeight="480"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      />
    </el-card>
    <ShowListDialog
      :visible.sync="showList.visible"
      :dialogTitle="showList.title"
      :tableLoading="showList.loading"
      :tableColumns="showList.columns"
      :tableData="showList.list"
    />
  </div>
</template>
<script>
import BasicTableForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import ShowListDialog from '@/components/ShowListDialog';
import { getTableAction } from '@/utils/getBtnsRender';
import { getInitFormData } from '@/utils/getUtils';
import basePage from '@/mixins/commodity/basePage';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants/list';
import { HISTORY_LIST_COLUMNS } from './constants';
import {
  getViewListService,
  getHistoryRecordsService
} from '@/api/commodity/commodityManage/upOrDownManage';
import { manageAreaSearchService } from '@/api/public';
export default {
  mixins: [basePage],
  components: {
    BasicTableForm,
    BasicTable,
    ShowListDialog
  },
  data () {
    return {
      showList: {
        visible: false,
        title: '历史上下架记录',
        loading: false,
        columns: HISTORY_LIST_COLUMNS,
        list: []
      },
      formItems: FORM_ITEMS,
      formData: getInitFormData(FORM_ITEMS),
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false
      }
    }
  },
  created () {
    this.setAreaOptions()
  },
  computed: {
    // 当前表单为空
    isEmptyForm () {
      const values = Object.values(this.formData);
      return values.every(item => !item);
    }
  },
  methods: {
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [{
        label: '查看历史记录',
        method: this.handleViewHistoryRecord
      }]
      return getTableAction({ h, row, actionList })
    },
    // 获取表格数据 by 查询表单
    async getTableData () {
      if (this.isEmptyForm) {
        return this.$message.warning('必须输入搜索条件');
      }
      const data = { ...this.formData, ...this.paginationParams };
      const loadingFn = state => { this.tableInfo.loading = state };
      const retData = await getViewListService(data, loadingFn);
      if (retData) {
        this.tableInfo.list = retData.results;
        this.pagination.totalNum = retData.totalNum;
      }
    },
    // 查看历史记录
    handleViewHistoryRecord (row) {
      this.showList.visible = true;
      this.getTableDataByHistoryRecord(row.skuNo);
    },
    // 获取历史记录列表
    async getTableDataByHistoryRecord (skuNo) {
      const data = { skuNo };
      const loadingFn = state => { this.showList.loading = state };
      const retData = await getHistoryRecordsService(data, loadingFn);
      if (retData) {
        this.showList.list = retData;
      }
    },
    // 区域下拉集合
    async setAreaOptions () {
      const res = await manageAreaSearchService()
      const index = this.formItems.findIndex(item => item.prop == 'manageAreaId')
      if (index > -1) this.formItems[index].options = res?.retData ?? []
    },
  }
}
</script>
